<template>
    <div>
        <el-table :data="list" style="width: 100%">
        <el-table-column label="选择" width="55">
        <template #default="scope"><el-checkbox v-model="scope.row.state" size="large" @change="changeHandle(scope.$index)" :disabled="scope.row.state"/></template>
        </el-table-column>
        <el-table-column label="编号" width="120">
        <template #default="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="待办事项" width="250">
        <template #default="scope">{{ scope.row.content }}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="120">
        <template #default="scope">{{ scope.row.startDate }}</template>
        </el-table-column>
        <el-table-column label="完成时间" width="120">
        <template #default="scope">{{ scope.row.finishDate }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="删除" min-width="60">
            <template #default="scope">
            <el-button
            link
            type="success"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
            >
            Remove
            </el-button>
            </template>
        </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { ElMessageBox } from 'element-plus'
export default {
    props:{list:Array},
    data() {
        return {
            list1:this.list
        }
    },
    methods: {
        changeHandle(i){
            ElMessageBox.confirm(
                '确认完成了吗？',
                'Warning',
                {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning',
                }
            )
                .then(() => {
                    this.$emit('changeD',i)
                })
                .catch(() => {
                    this.list1[i].state=false
                })
        },
        deleteRow(i){
            ElMessageBox.confirm(
                '确认删除吗？',
                'Warning',
                {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning',
                }
            )
                .then(() => {
                    this.$emit('del',i)
                })
                .catch(() => {
                //
                })
        }
    },
}
</script>